<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="https://unpkg.com/vue@next"></script>
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-plus/lib/theme-chalk/index.css">
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-plus/lib/index.full.js"></script>
</head>
<body>
<div id="root"></div>
<script>
  //  拆分逻辑，分为单个代办事项逻辑和代办事项列表逻辑

  //  单个待办事项逻辑
  const toDoItemEffect = ()=>{
    const {ref} = Vue;
    let toDoItem = ref(""); // 代办事项
    const changeInput = (value)=>{
      toDoItem.value = value;
    }
    return {toDoItem, changeInput}
  }

  //  待办事项列表逻辑
  const toDoListEffect = ()=>{
    const {reactive} = Vue;
    let toDoList = reactive([]); // 代办事项列表
    let checkedItems = [];

    const addItem = (item)=>{
      toDoList.push({content:item.value, id:new Date().valueOf()});
      item.value = "";
    }

    const delItem = ()=>{
      let delItemsId = checkedItems.map(item=>item.id);
      let filterList = toDoList.filter(toDoItem => delItemsId.indexOf(toDoItem.id) === -1);

      //  尝试以下操作 toDoList = []; // 这里要优化
      toDoList.splice(0, toDoList.length);
      toDoList.push(...filterList);
    }

    const selectItem = (checked)=>{
      checkedItems = checked;
    }

    return {toDoList, addItem, delItem,selectItem};
  }






  const App = {
    template: `
              <div>
                请输入待办事项：<el-input type="text" :model-value="toDoItem" @input="changeInput" style="width:200px;"/><el-button @click="submit">提交</el-button>
                <ul>
                  <li v-for="(item, index) in toDoList" :key="index">
                    {{item.id}}：{{item.content}}
                  </li>
                </ul>
                <el-table :data="toDoList" style="width: 100%" @selection-change="selectMultiple">
                  <el-table-column type="selection" width="55">
                  </el-table-column>
                  <el-table-column prop="content" label="待办事项">
                  </el-table-column>
                </el-table>
                <el-button type="danger" @click="delItem">删除</el-button>
              </div>
            `,
    setup(){
      // setup函数只做流程中转 引用定义的数据和函数 并导出给template模板使用
      const {toDoItem, changeInput} = toDoItemEffect()
      const {toDoList, addItem, delItem, selectItem} =  toDoListEffect()
      const submit = ()=>{
        addItem(toDoItem)
      }

      const selectMultiple = (checked)=>{
        selectItem(checked);
      }

      const {toRefs} = Vue;

      return {
        toDoItem,
        toDoList:toDoList,
        changeInput,
        submit,
        selectMultiple,
        delItem
      }
    }
  };
  const app = Vue.createApp(App);
  app.use(ElementPlus);
  app.mount("#root");
</script>
</body>
</html>